<template>
  <div>
    <van-nav-bar title="收货地址" left-text="" left-arrow @click="onClickLeft">
      <!-- 使用插槽 -->
      <template #right>
        <img src="../../../img/分 享.png" alt="" style="width: 70px;">
      </template>
    </van-nav-bar>
    <div class="Abox">
      <div>
        <div v-if="addlist != ''" class="addressData" v-for="item in addlist" :key="item.id">
          <div class="div-top">
            <div class="div-left">{{ item.nickname }}</div>
            <div class="div-right">
              <p>
                <span class="addressname">{{ item.nickname }}</span>
                <span class="addresstel">{{ item.tel }}</span>
              </p>
              <p class="addressS">{{ item.longitude }}--{{ item.latitude }}--市-- {{ item.detail_address }}</p>
            </div>
          </div>
          <hr class="div-hr">
          <div class="div-bottom">
            <div class="mo"><input type="checkbox" class="checkbox" v-model="isDefault" @click="checkbtn">设为默认地址</div>
            <div class="emit" @click="emit"><img src="../../../img/编辑.png" alt="">编辑</div>
            <div class="delete" @click="del(item.id)"><img src="../../../img/删除.png" alt="">删除</div>
          </div>
        </div>
        <div v-else>
          <p class="zw">暂无收货地址哦~</p>
        </div>
      </div>
      <button @click="addAddress" class="addAddress">+添加收货地址</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import axios from '@/utils/index'

const addlist = ref([])
const getlist = () => {
  axios.get('/api/adressCHunYu').then(
    res => {
      console.log(res.data.data);

      addlist.value = res.data.data
    }
  )
}
getlist()
const router = useRouter()
const addAddress = () => {
  router.push('/address-add')
}
const onClickLeft = () => {
  router.push('/mine')
}
const address = localStorage.getItem('address')
// console.log(address)
const addressData = JSON.parse(address)
// 默认地址状态
const addressStatus = JSON.parse(localStorage.getItem('address'))
// console.log(addressStatus)
const isDefault = ref('')
if (!localStorage.getItem('address')) {
  isDefault.value = false
} else {
  const dz = addressStatus
  isDefault.value = dz.isDefault
  console.log(isDefault.value)
}

// 编辑
const emit = () => {
  router.push('/address-add')
}
// 删除
const del = (id) => {
  axios.delete('/api/chunYuDelete', {
    params: {
      id: id
    }
  })
  getlist()
  // window.location.reload()
}
// 获取到地址列表

</script>
<style scoped>
.Abox {
  width: 100%;
  height: 14rem;
  background-color: #EEEEEE;
}

.zw {
  font-size: 0.4rem;
  color: #939393;
  position: fixed;
  top: 520px;
  left: 270px;
}

.addAddress {
  width: 80%;
  height: 100px;
  background-color: #0070FF;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 30px;
  margin-left: 10%;
  position: fixed;
  bottom: 60px;
}

.div-left {
  width: 65px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  font-size: 22px;
  font-weight: 600;
  border-radius: 50%;
  color: #0D77FF;
  background-color: #DCECFF;
  margin-left: 5%;
  margin-top: 30px;
}

.div-right {
  margin-left: 5%;
  margin-top: 20px;
}

.addressData {
  width: 100%;
  height: 200px;
  background-color: #fff;
}

.div-top {
  width: 100%;
  height: 120px;
  display: flex;
  /* border-bottom: 1px solid #F8F8F8; */
}

.addressname {
  font-size: 30px;
  font-weight: 600;
}

.addresstel {
  font-size: 25px;
  color: #BCBCBC;
  margin-left: 10px;
}

.addressS {
  margin-top: 10px;
  font-size: 25px;
}

.div-hr {
  width: 81%;
  margin-left: 19%;
  margin-top: 10px;
}

.div-bottom {
  display: flex;
  font-size: 25px;
  color: #A0A0A0;
  line-height: 70px;
}

.div-bottom>div>img {
  width: 35px;
  margin-right: 10px;
  margin-bottom: -5px;
}

.checkbox {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.mo {
  width: 50%;
  margin-left: 19%;
}

.emit {
  width: 20%;
}

.delete {
  width: 20%;
}
</style>
